import React, { useEffect, useState } from 'react'
import { BorderBox1, BorderBox5, DigitalFlop, Loading } from '@jiaminghi/data-view-react'
import sty from './index.module.scss'
import { connect } from 'dva'
import { isEmpty,isUndefined } from 'lodash'
import A1 from '../../../../assets/images/sp.png'
import A2 from '../../../../assets/images/zzt.png'
import LoadSty from '../../../../utils/hooks'

function Index({ rda }) {

    let [Load,setLoad] = useState('flex')

    useEffect(()=>{
        console.log(rda.zyzs);
        if(!isUndefined(rda.zyzs)){
            setLoad('none')
        }
    },[rda])

    return (
        <BorderBox1 style={{ flex: 4 }} >
            <Loading style={LoadSty(Load)}>大数据计算加载中.....</Loading>
            <div className={sty.box}>
                <BorderBox5 className={[sty.borboax5, sty.tops].join(" ")}>
                    <div className={sty.borderBoxContent}>
                        <div className={sty.compareValue}>
                            视频课件
                        </div>
                        <div className={sty.mainValue}>
                            <img src={A1} alt="" srcset="" />
                            <span>{isUndefined(rda.zyzs) ? 18596 : rda.zyzs}</span>
                        </div>
                    </div>
                </BorderBox5>
                <BorderBox5 reverse="{true}" className={[sty.borboax5, sty.bottoms].join(" ")}>
                    <div className={sty.borderBoxContent}>
                        <div className={[sty.compareValue, sty.comleft].join(" ")}>
                            测试资源
                        </div>
                        <div className={sty.mainValue} style={{ justifyContent: 'flex-end' }}>
                            <span style={{ marginRight: 10 }}>{isUndefined(rda.kjzs) ? 58965 : rda.kjzs}</span>
                            <img src={A2} alt="" srcset="" />
                        </div>
                    </div>
                </BorderBox5>
            </div>
        </BorderBox1 >
    )
}

const mapStateToProps = ({ leftTop }, ownProps) => {
    return {
        rda: leftTop
    }
}

const A = connect(mapStateToProps)(Index)
export default A
